<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>账号注册</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/own.css" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
		<style type="text/css">
			/*下面两项是重置muicss的输入框label和input之间的宽比率*/
			
			.mui-input-row label {
				width: 20%;
			}
			
			.mui-input-row label~input {
				width: 80%;
			}
		</style>
	</head>

	<body style="background-color: #FFFFFF;">

		<header class="mui-bar mui-bar-nav own-header-hidden">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
		</header>

		<div class="mui-content">

			<div class="mui-card" style="margin-top: 20px;">
				<form class="mui-input-group">
					<div class="mui-input-row">

						<input type="text" class="mui-input-clear" placeholder="请输入手机号" id="tel">
					</div>
					<div class="mui-input-row">

						<input type="text" style="width: 60%; float: left;" class="mui-input-clear mui-col-sm-5" placeholder="请输入验证码" id="yzm">

						<input type="button" style="border: solid 1px #04BB21; width: 35%; color: #04BB21;border-radius:4px ; margin-top: 5px;" id="btn" value="免费获取验证码" />
					</div>
					<p id="popo"></p>
					<div class="mui-input-row">

						<input type="text" class="mui-input-clear" placeholder="请输入密码" id="pass">
					</div>

				</form>
			</div>
			<div class="mui-button-row" style="margin: 10px 15px;">
				<button type="button" class="mui-btn mui-btn-green own-btn-green mui-btn-block " style="padding: 5px 0px;" id="sub">注册</button>
			</div>

		</div>
		<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
		<script src="../js/mui.min.js" charset="UTF-8"></script>
		<script src="../js/own.js" charset="UTF-8"></script>
		<script src="../js/ajax.js" charset="UTF-8"></script>
		<script type="text/javascript" charset="UTF-8">
			mui.plusReady(function() {

				//var re = /^[1][3587]\d{9}$/;
				var wait = 120;

				function time(o) {
					if(wait == 0) {
						o.removeAttribute("disabled");
						o.value = "免费获取验证码";
						wait = 120;
					} else { // www.jbxue.com
						o.setAttribute("disabled", true);
						o.value = "重新发送(" + wait + ")";
						wait--;
						setTimeout(function() {
								time(o)
							},
							1000)
					}

				}
				document.getElementById("btn").onclick = function() {

					time(this);
					var tel = document.getElementById("tel").value;

					var data = {};
					data.account = tel;

					//联网注册
					mui.ajax(url + 'rest/sendCode', {
						data: data,
						dataType: 'json', //服务器返回json格式数据
						type: 'post', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；

						success: function(result) {

							if(result.status != '0') {
								mui.alert(result.msg);
							} else {

							}

						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							console.log(type);
						}
					});

				}

				var sub = document.getElementById("sub");
				sub.addEventListener("tap", function() {

					var re = /^[1][3587]\d{9}$/;
					//var ri=/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i;
					var tel = document.getElementById("tel").value;
					var yzmm = document.getElementById("yzm").value;
					var pass = document.getElementById("pass").value;
					if(!re.test(tel)) {
						//alert("请输入正确的联系方式");
						mui.alert("请输入正确的手机号码");
						return false;
					} else if(yzmm == "") {
						//alert("请输入正确的联系方式");
						mui.alert("请输入正确的验证码");
						return false;
					} else if(pass.length < 6 || pass.length > 18) {
						mui.alert("密码至少6位数且不能超过18位数字");
						return false;
					}
					/*else {
						plus.storage.setItem("user", $("#tel").val());
						
					}*/

					//判断账号是否存在
					mui.ajax(url + 'rest/isExists', {
						data: {
							tel: tel
						},
						dataType: 'json', //服务器返回json格式数据
						type: 'post', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；

						success: function(result) {
							//alert(result);
							if(result) {
								//alert(222);
								mui.alert("账号已经存在，请登录！");
								mui.back();
							} else {

								var data = {};
								data.account = tel;
								data.code = yzmm;
								data.password = pass; //联网注册
								mui.ajax(url + 'rest/registerSrv', {
									data: data,
									dataType: 'json', //服务器返回json格式数据
									type: 'post', //HTTP请求类型
									timeout: 10000, //超时时间设置为10秒；

									success: function(result) {

										if(result.status != '0') {
											alert(123)
											mui.alert(result.msg);
										} else {

											mui.toast("注册成功");
											mui.back();
										}

									},
									error: function(xhr, type, errorThrown) {
										//异常处理；
										console.log(type);
									}
								});

							}

						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							console.log(type);
						}
					});

				});

			});
		</script>

	</body>

</html>